<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - OA办公系统</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="../../css/style.css">
</head>
<body class="bg-gray-100 h-screen flex items-center justify-center p-6">
    <div class="container mx-auto max-w-md fade-in">
        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <!-- 登录表单 -->
            <div class="p-8">
                <div class="text-center mb-8">
                    <div class="inline-flex items-center justify-center h-16 w-16 bg-blue-100 rounded-full mb-4">
                        <i class="fas fa-building text-blue-600 text-2xl"></i>
                    </div>
                    <h1 class="text-2xl font-bold text-gray-800">企业OA办公系统</h1>
                    <p class="text-gray-500 mt-2">高效、智能的企业办公平台</p>
                </div>
                
                <form>
                    <div class="mb-6">
                        <label for="username" class="block text-sm font-medium text-gray-700 mb-2">用户名</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-user text-gray-400"></i>
                            </div>
                            <input type="text" id="username" name="username" class="pl-10 w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="请输入用户名" required>
                        </div>
                    </div>
                    
                    <div class="mb-6">
                        <div class="flex items-center justify-between mb-2">
                            <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
                            <a href="#" class="text-sm text-blue-500 hover:text-blue-600">忘记密码?</a>
                        </div>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-lock text-gray-400"></i>
                            </div>
                            <input type="password" id="password" name="password" class="pl-10 w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="请输入密码" required>
                            <div class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer">
                                <i class="fas fa-eye-slash text-gray-400 hover:text-gray-600" id="togglePassword"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex items-center mb-6">
                        <input type="checkbox" id="remember" name="remember" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="remember" class="ml-2 block text-sm text-gray-700">记住我</label>
                    </div>
                    
                    <button type="button" onclick="location.href='../index.html'" class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200 btn-hover-effect">
                        登录
                    </button>
                </form>
                
                <div class="mt-6 text-center">
                    <p class="text-sm text-gray-600">其他登录方式</p>
                    <div class="flex justify-center space-x-4 mt-3">
                        <a href="#" class="h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 hover:text-gray-700">
                            <i class="fab fa-weixin text-lg"></i>
                        </a>
                        <a href="#" class="h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 hover:text-gray-700">
                            <i class="fas fa-qrcode text-lg"></i>
                        </a>
                        <a href="#" class="h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 hover:text-gray-700">
                            <i class="fas fa-mobile-alt text-lg"></i>
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- 底部信息 -->
            <div class="bg-gray-50 px-8 py-4 text-center">
                <p class="text-xs text-gray-500">© 2023 企业OA办公系统 · 技术支持: <a href="#" class="text-blue-500 hover:text-blue-600">企业技术部</a></p>
            </div>
        </div>
    </div>
    
    <script>
        // 切换密码显示/隐藏
        document.getElementById('togglePassword').addEventListener('click', function() {
            const passwordInput = document.getElementById('password');
            const passwordIcon = document.getElementById('togglePassword');
            
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                passwordIcon.classList.remove('fa-eye-slash');
                passwordIcon.classList.add('fa-eye');
            } else {
                passwordInput.type = 'password';
                passwordIcon.classList.remove('fa-eye');
                passwordIcon.classList.add('fa-eye-slash');
            }
        });
    </script>
</body>
</html>